import React, { useEffect, useState } from 'react'
import './DataCenter.less'
import { Alert, App, Col, Space, Row, Skeleton } from 'antd'
import DataOverViewBoxItem from '@/components/DataOverViewBoxItem'
import { useModel } from '@umijs/max'
import dayjs from 'dayjs'
import LastMoneyLine from './LastMoneyLine/LastMoneyLine'
import RentLine from './RentLine/RentLine'
import RentBar from './RentBar/RentBar'
import OrderBar from './OrderBar/OrderBar'
import LastMoneyBar from './LastMoneyBar/LastMoneyBar'
import ECommerceOrderBar from './ECommerceOrderBar/ECommerceOrderBar'

const DataCenter = () => {
  const { message } = App.useApp()

  const [dataOverView, setDataOverView] = useState([])
  const [dataLoading, setDataLoading] = useState(true)
  const [performance, setPerformance] = useState({}) // 业绩

  const { GetDataOverview } = useModel('DataCenter')

  const dateTypeObj = {
    近一周: {
      type: 1,
      date: new Date().getDay() - 1,
      endValue: 6
    },
    近一月: {
      type: 2,
      date: new Date().getDate(),
      endValue: 6
    },
    近一年: {
      type: 3,
      date: new Date().getMonth() + 1,
      endValue: 11
    }
  }

  // 数据概况 start ---------------------------------------

  useEffect(() => {
    getDataOverview()
  }, [])

  const getDataOverview = async () => {
    setDataLoading(true)
    const res = await GetDataOverview()
    // console.log('res========', res)
    if (res) {
      setDataOverView(res?.orderData)
      setPerformance(res?.topData)
      setDataLoading(false)
    }
  }

  // 数据概况 end ---------------------------------------

  return (
    <div className='data_center'>
      <div className='alert_box'>
        <Alert
          type='info'
          message={
            <Space
              style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                width: '100%'
              }}
            >
              <span>总业绩 : {performance?.total_performance || 0} 元</span>
              <span>今日业绩 : {performance?.today_performance || 0} 元</span>
            </Space>
          }
          banner
        />
      </div>
      <div className='data_overview'>
        <div className='data_overview_title'>
          <h2>数据概况</h2>
          <span>更新时间 {dayjs().format('YYYY-MM-DD HH:mm:ss')}</span>
        </div>

        <Row gutter={20}>
          {dataLoading ? (
            new Array(8).fill(0).map((item, index) => {
              return (
                <Col xs={12} sm={12} md={8} lg={8} xl={6} key={Math.random() * 100}>
                  <div
                    style={{
                      padding: '20px 40px',
                      boxSizing: 'border-box',
                      background: '#fff',
                      marginBottom: '20px',
                      borderRadius: '10px'
                    }}
                  >
                    <Skeleton active avatar />
                  </div>
                </Col>
              )
            })
          ) : (
            <>
              {dataOverView &&
                dataOverView.length &&
                dataOverView.map((item, index) => {
                  return (
                    <Col xs={12} sm={12} md={8} lg={8} xl={6} key={index}>
                      <DataOverViewBoxItem item={item} />
                    </Col>
                  )
                })}
            </>
          )}
        </Row>
      </div>

      <RentLine dateTypeObj={dateTypeObj} />

      <LastMoneyLine dateTypeObj={dateTypeObj} />

      <div className='chart_wrapper'>
        <RentBar dateTypeObj={dateTypeObj} />

        <OrderBar dateTypeObj={dateTypeObj} />
      </div>

      <div className='chart_wrapper'>
        <LastMoneyBar dateTypeObj={dateTypeObj} />

        <ECommerceOrderBar dateTypeObj={dateTypeObj} />
      </div>
    </div>
  )
}

export default DataCenter
